<template>
  <el-dialog fullscreen @close="closeDialog" title="添加权限" :visible.sync="showAdd">
    <el-form :model="form" ref="form" size="mini" :rules="rules" label-width="80px" class="demo-ruleForm">

      <el-form-item label="标题" prop="title" required>
        <el-col :span="11">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="名称" prop="name" required>
        <el-col :span="11">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="前端路由" prop="url" required>
        <el-col :span="11">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="类型" prop="type" required>
        <el-col :span="11">
          <el-input v-model="form.type" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="所属父权" prop="parentId">
        <el-col :span="11">
          <el-input v-model="form.parentId" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="姓名" prop="name" required>
        <el-col :span="11">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-col :span="11">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-col :span="11">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别" prop="sex" required>
        <el-col :span="11">
          <el-radio-group v-model="form.sex">
            <el-radio label="M">男</el-radio>
            <el-radio label="F">女</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>
      <el-form-item label="是否启用" prop="startUsing" required>
        <el-col :span="11">
          <el-radio-group v-model="form.startUsing">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">禁用</el-radio>
          </el-radio-group>
        </el-col>
      </el-form-item>
      <el-form-item label="选择角色">
        <el-col :span="11">
          <el-checkbox-group v-model="form.roleIds">
            <el-checkbox v-for="role in roles" :key="role.id" :label="role.id" name="roleIds">{{role.roleName}}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="save('form')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import axios from '@/common/js/axios'
import global from '@/common/components/Global'
export default {
  name: 'admin-user-add',
  props:{
    showAdd:Boolean,
    roles:Array,
  },
  data(){

    var validatorUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    return {
      form:{
        name:null,
        region:null,
        sex:'M',
        headPortrait:null,
        startUsing:true,
        roleIds:[]
      },
      rules:{
        userName:[
          {validator:validatorUserName, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    closeDialog(){
      this.$emit('update:showAdd', false)
    },
    save(formName){
      let _this = this;
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post(global.adminBackEndApi + "sys/admin-user/save",_this.form).then(response => {
            _this.$emit('update:showAdd', false)
            _this.$emit('saveCallback')
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>
